<template>
  <div class="self-Activity">
    <el-tabs v-model="activeName" @tab-click="handleCLick">
      <el-tab-pane label="未开始" name="1"/>
      <el-tab-pane label="进行中" name="2"/>
      <el-tab-pane label="已结束" name="3"/>
      <router-view/>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: ''
    }
  },
  beforeRouteUpdate(to, from, next) {
    switch (to.name) {
      case 'Unstart':
        this.activeName = '1'
        break
      case 'Ongoing':
        this.activeName = '2'
        break
      case 'Closed':
        this.activeName = '3'
        break
    }
    next()
  },
  created() {
    const name = this.$route.name
    switch (name) {
      case 'Unstart':
        this.activeName = '1'
        break
      case 'Ongoing':
        this.activeName = '2'
        break
      case 'Closed':
        this.activeName = '3'
        break
    }
  },
  methods: {
    handleCLick(val) {
      setTimeout(() => {
        if (val.name === '1') {
          this.$router.push({ name: 'Unstart' })
        }
        if (val.name === '2') {
          this.$router.push({ name: 'Ongoing' })
        }
        if (val.name === '3') {
          this.$router.push({ name: 'Closed' })
        }
      }, 500)
    }
  }
}
</script>

<style lang="scss">
.self-Activity {
  padding: 0 20px;
}
</style>
